<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房产证图片上传</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }

        .upload-area {
            border: 2px dashed #3498db;
            border-radius: 5px;
            padding: 30px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .upload-area:hover {
            background-color: #f0f8ff;
            border-color: #2980b9;
        }

        .upload-icon {
            font-size: 48px;
            color: #3498db;
            margin-bottom: 15px;
        }

        .upload-text {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .file-input {
            display: none;
        }

        .preview-container {
            display: none;
            margin-top: 20px;
            text-align: center;
        }

        .preview-image {
            max-width: 100%;
            max-height: 400px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: block;
            margin: 20px auto 0;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        .requirements {
            margin-top: 30px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            font-size: 14px;
        }

        .requirements h3 {
            margin-top: 0;
            color: #2c3e50;
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            margin-top: 10px;
            display: none;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<div class="container">
    <h1>OCR-房产证图片上传</h1>
    <div class="requirements">
        <h3>上传要求：</h3>
        <ul>
            <li>请上传清晰、完整的房产证图片</li>
            <li>图片需包含房产证全部内容，无遮挡</li>
            <li>确保图片光线充足，文字清晰可辨</li>
            <li>支持 JPG、PNG 格式，大小不超过 5MB</li>
            <li>请勿上传与房产证无关的图片</li>
        </ul>
    </div>
    <div class="upload-area" id="uploadArea">
        <div class="upload-icon">📁</div>
        <div class="upload-text">点击或拖拽房产证图片到此处</div>
        <div class="upload-subtext">支持 JPG、PNG 格式，大小不超过 5MB</div>
        <input type="file" id="fileInput" class="file-input" accept="image/jpeg, image/png">
    </div>

    <div class="error-message" id="errorMessage"></div>

    <div class="preview-container" id="previewContainer">
        <img id="previewImage" class="preview-image" src="#" alt="房产证预览">
        <button class="btn" id="uploadBtn">确认上传</button>
    </div>
    <div class="result">

    </div>


</div>

<script>
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    const previewContainer = document.getElementById('previewContainer');
    const previewImage = document.getElementById('previewImage');
    const uploadBtn = document.getElementById('uploadBtn');
    const errorMessage = document.getElementById('errorMessage');

    let selectedFile = null;
    // 点击上传区域触发文件选择
    uploadArea.addEventListener('click', () => {
        fileInput.click();
    });

    // 拖放功能
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.style.backgroundColor = '#f0f8ff';
        uploadArea.style.borderColor = '#2980b9';
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.style.backgroundColor = '';
        uploadArea.style.borderColor = '#3498db';
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.style.backgroundColor = '';
        uploadArea.style.borderColor = '#3498db';

        if (e.dataTransfer.files.length) {
            handleFile(e.dataTransfer.files[0]);
        }
    });

    // 文件选择处理
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length) {
            handleFile(fileInput.files[0]);
        }
    });

    // 处理选择的文件
    function handleFile(file) {
        // 验证文件类型
        const validTypes = ['image/jpeg', 'image/png'];
        if (!validTypes.includes(file.type)) {
            showError('请上传 JPG 或 PNG 格式的图片');
            return;
        }

        // 验证文件大小 (5MB)
        if (file.size > 5 * 1024 * 1024) {
            showError('图片大小不能超过 5MB');
            return;
        }

        selectedFile = file;
        // 预览图片
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImage.src = e.target.result;
            previewContainer.style.display = 'block';
            errorMessage.style.display = 'none';
        };
        reader.readAsDataURL(file);
    }

    // 显示错误信息
    function showError(message) {
        errorMessage.textContent = message;
        errorMessage.style.display = 'block';
        previewContainer.style.display = 'none';
    }

    // 上传按钮点击事件
    uploadBtn.addEventListener('click', () => {
        // 这里添加实际上传逻辑
        alert('房产证图片已上传，正在识别中');
        const formData = new FormData();
        formData.append('file', selectedFile);
        $.ajax({
            url: '/ocr/ownership',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                let jsonData = JSON.parse(data);
                console.log(jsonData)
                let resultDiv = document.querySelector('.result');
                let str = '<h1>' + 'OCR-房产证-识别结果';
                for (let val of jsonData.prism_keyValueInfo) {
                    if (val.value != null && val.value.length > 0){
                        str += '<h2>' + val.key + ': ' + val.value + '</h2>'
                    }
                }
                resultDiv.innerHTML = str;
            }
        });

        // 示例: 实际项目中可以使用 fetch 或 axios 上传
        // const formData = new FormData();
        // formData.append('propertyCert', fileInput.files[0]);
        // fetch('/api/upload', { method: 'POST', body: formData })
        //   .then(response => response.json())
        //   .then(data => console.log(data))
        //   .catch(error => console.error(error));
    });
</script>
</body>
</html>